<template>
  <view class="goods-detail" v-if="loading">
    <form :borderBottom="false">
      <view class="uni-form-item uni-column">
        <view class="title">商品国际编码</view>
        <input class="uni-input" v-model="goodInfo.keyword" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">商品名称</view>
        <input class="uni-input" name="input" v-model="goodInfo.storeName" placeholder="这是一个输入框" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">单位</view>
        <input class="uni-input" name="input" v-model="goodInfo.unitName" placeholder="这是一个输入框" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">品牌</view>
        <picker @change="bindPickerBrand" :value="index" :range="brandList" range-key="enName">
          <view class="uni-input">{{goodInfo.brandName}}</view>
        </picker>
      </view>
      <view class="uni-form-item uni-column" @click="showPicker = true">
        <view class="title">分类</view>
        <view class="uni-input">{{goodInfo.cateName}}</view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">商品主图</view>
        <view class="imageBox">
          <image :src="goodInfo.image" mode="fix" class="image"></image>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">商品轮播图</view>
        <view class="imageBox">
          <block v-for="(item,index) in goodInfo.sliderImages" :key="index">
            <image :src="item" mode="fix" class="image"></image>
          </block>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">商品简介</view>
        <textarea class="text" placeholder-style="color:#f2f2f2" v-model="goodInfo.storeInfo" :rows="3" :cols="5" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">商品详细信息</view>
        <view class="goodsInfo">
          <view class="item-list">
            <view class="item">
              <label class="title1">成分</label>
              <input type="text" v-model="goodInfo.composition" placeholder="请输入">
            </view>
            <view class="item" style="border-left:1rpx solid #E8E9ED">
              <label class="title1">规格</label>
              <input type="text" v-model="goodInfo.dimension" placeholder="请输入">
            </view>
          </view>
          <view class="item-list">
            <view class="item">
              <label class="title1">季节</label>
              <input type="text" v-model="goodInfo.seasonCode" placeholder="请输入">
            </view>
            <view class="item" style="border-left:1rpx solid #E8E9ED">
              <label class="title1">色号</label>
              <input type="text" v-model="goodInfo.colorCode" placeholder="请输入">
            </view>
          </view>
        </view>
      </view>
        <view>
          <view class="uni-form-item uni-column">
            <view class="title">预计发货时间</view>
            <input class="uni-input" name="input" v-model="goodInfo.deliveryData" placeholder="这是一个输入框" />
          </view>
          <view class="uni-form-item uni-column">
            <view class="title">预计到货时间</view>
            <view class="time">
              <input type="number" v-model="goodInfo.earliestArrivalData" name="input" />至<input type="number" v-model="goodInfo.slowestArrivalData" name="input" />
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="title">商品推荐图</view>
            <view class="imageBox">
              <image class="image" v-if="goodInfo.recommendImg" :src="item.recommendImg"></image>
              <image class="image" src="../../static/images/add.png" v-else></image>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="title">商品规格</view>
            <view class="goodsInfo" v-for="(iitem,iindex) in goodInfo.attrValue" :key="iindex">
              <view class="item-list">
                <view class="item">
                  <label class="title1">规格图</label>
                  <view class="skuImage">
                    <image class="image" v-if="iitem.image" :src="iitem.image"></image>
                    <image class="image" src="../../static/images/add.png" v-else></image>
                  </view>
                </view>
                <view class="item" style="border-left:1rpx solid #E8E9ED">
                  <label class="title1">sourceSkuId</label>
                  <input type="text" v-model="iitem.sourceSkuId" placeholder="请输入">
                </view>
              </view>
              <view class="item-list">
                <view class="item">
                  <label class="title1">规格</label>
                  <input type="text" v-model="iitem.suk" placeholder="请输入">
                </view>
                <view class="item" style="border-left:1rpx solid #E8E9ED">
                  <label class="title1">库存</label>
                  <input type="text" v-model="iitem.stock" placeholder="请输入">
                </view>
              </view>
              <view class="item-list">
                <view class="item">
                  <label class="title1">售价(￥)</label>
                  <input type="text" placeholder="请输入" v-model="iitem.price">
                </view>
                <view class="item" style="border-left:1rpx solid #E8E9ED">
                  <label class="title1">成本价(￥)</label>
                  <input type="text" placeholder="请输入" v-model="iitem.cost">
                </view>
              </view>
              <view class="item-list">
                <view class="item">
                  <label class="title1">原价(€)</label>
                  <input type="text" placeholder="请输入" v-model="iitem.otPrice">
                </view>
                <view class="item" style="border-left:1rpx solid #E8E9ED">
                  <label class="title1">成交价(￥)</label>
                  <input type="text" placeholder="请输入" :value="dealPrice(iitem.price, iitem.taxAndSecondPrice)">
                </view>
              </view>
            </view>
          </view>
        </view>
    </form>
    <view class="address_mask back_mask" @click="showPicker = false" v-if="showPicker">
      <view class="picker_address_box pos_absolute1" @click.stop>
        <view class="picker_btn flex3">
          <view class="btn_cancle" @click="showPicker = false">取消</view>
          <view class="btn_confirm" @click="confirmTap">确认</view>
        </view>
        <view class="picker_box">
          <view class="hk_mac">
            <picker-view v-if="productList.length > 0" class="picker_view" @change="bindChange2" :value="value2">
              <picker-view-column class="area_type">
                <view class="item flex1" v-for="(item,index) in productList" :key="index">{{item.name}}</view>
              </picker-view-column>
              <picker-view-column class="area_city">
                <view class="item flex1" v-for="(item,index) in productList[index1]['child']" :key="index">{{item.name}}</view>
              </picker-view-column>
              <picker-view-column class="area_city">
                <view class="item flex1" v-for="(item,index) in productList[index1]['child'][index2]['child']" :key="index">{{item.name}}</view>
              </picker-view-column>
            </picker-view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {
  insideProductDetailApi,
  productResetPrice,
  productNormKeywordApi,
  brandList,
  seasonListMer,
} from "@/api/storeGoods.js";
import { categoryApi } from "@/api/store.js";
export default {
  data() {
    return {
      id: "",
      goodInfo: {},
      detailData: [],
      productList: [],
      keywordList: [],
      brandList: [],
      seasonList: [],
      loading: false,
      showPicker: false,
      index1: 0,
      index2: 0,
      value2: [0, 0, 0],
    };
  },
  onLoad: function (options) {
    this.getAllCategory();
    this.id = options.id;
    this.getGoodsDetail();
    this.getBrandList();
    this.getSeasonList();
  },
  methods: {
    // 运费模板；
    getBrandList() {
      brandList({ type: 1 }).then((res) => {
        this.brandList = res.data;
      });
    },
    dealPrice: function (val, val1) {
      return Number(val) + Number(val1);
    },
    getGoodsDetail() {
      uni.showLoading({ title: "加载中" });
      insideProductDetailApi(this.id).then((res) => {
        let info = res.data;
        this.goodInfo = {
          image: info.image,
          recommendImg: info.recommendImg,
          sliderImages: JSON.parse(info.sliderImage),
          sliderImage: info.sliderImage,
          storeName: info.storeName,
          storeInfo: info.storeInfo,
          seasonCode: info.seasonCode,
          colorCode: info.colorCode,
          keyword: info.keyword,
          cateIds:
            info.cateId == null || info.cateId == "null"
              ? ""
              : Number(info.cateId), // 商品分类id
          cateId: info.cateId, // 商品分类id传值
          unitName: info.unitName,
          sort: info.sort,
          isShow: info.isShow,
          isBenefit: info.isBenefit,
          isNew: info.isNew,
          isGood: info.isGood,
          isHot: info.isHot,
          isBest: info.isBest,
          tempId: info.tempId,
          brandId: info.brandId,
          brandName: info.brandName,
          // barCode: info.barCode,
          deliveryData: info.deliveryData,
          attrValue: info.attrValue,
          attr: info.attr,
          selectRule: info.selectRule,
          isSub: info.isSub,
          content: " ",
          specType: info.specType,
          id: info.id,
          giveIntegral: info.giveIntegral,
          ficti: info.ficti,
          coupons: info.coupons,
          composition: info.composition,
          dimension: info.dimension,
          deliveryData: info.deliveryData,
          earliestArrivalData: info.earliestArrivalData,
          slowestArrivalData: info.slowestArrivalData,
        };
        this.productList.map((item, idx) => {
          item.child.map((iitem, idx1) => {
            iitem.child.map((iiitem, idx2) => {
              if (iiitem.id == this.goodInfo.cateIds) {
                this.goodInfo.cateName =
                  item.name + "/" + iitem.name + "/" + iiitem.name;
              }
            });
          });
        });
        uni.hideLoading();
        this.loading = true;
      });
    },
    // 分类列表
    getAllCategory: function () {
      let that = this;
      categoryApi({ status: 1, type: 1 }).then((res) => {
        that.productList = res.data;
      });
    },
    bindChange2(e) {
      let { value } = e.detail;
      console.log(value);
      if (value[0] != this.value2[0]) {
        this.value2 = [];
        this.value2.push(value[0]);
        this.value2.push(0);
        this.value2.push(0);
      }
      if (value[1] != this.value2[1]) {
        this.value2 = [];
        this.value2.push(value[0]);
        this.value2.push(value[1]);
        this.value2.push(0);
      } else {
        if (value[0] == this.value2[0] && value[1] == this.value2[1]) {
          this.value2 = [];
          this.value2.push(value[0]);
          this.value2.push(value[1]);
          this.value2.push(value[2]);
        }
      }
      this.index1 = e.detail.value[0];
      this.index2 = e.detail.value[1];
    },
    confirmTap() {
      let { value1, value2, productList } = this.$data;
      this.goodInfo.cateIds =
        productList[value2[0]]["child"][value2[1]]["child"][value2[2]]["id"];
      this.productList.map((item, idx) => {
        item.child.map((iitem, idx1) => {
          iitem.child.map((iiitem, idx2) => {
            if (iiitem.id == this.goodInfo.cateIds) {
              this.goodInfo.cateName =
                item.name + "/" + iitem.name + "/" + iiitem.name;
            }
          });
        });
      });
      this.showPicker = false;
    },
    // 品牌修改
    bindPickerBrand(e) {
      let { value } = e.detail;
      this.goodInfo.brandName = this.brandList[value].enName;
      this.goodInfo.brandId = this.brandList[value].brandId;
    },
    // 季节列表
    getSeasonList() {
      seasonListMer().then((res) => {
        console.log(res);
      });
    },
    // 国际编码查询
    // querySearchAsync(){
    //   if (this.goodInfo.keyword.length < 5) return;
    //   productNormKeywordApi(this.goodInfo.keyword).then((res)=>{
    //     this.keywordList=res.data.map((i) => {i.value = i.keyword;});
    //   })
    // },
    // // 清空加价方式
    // resetPrice(id){
    //   var that = this;
    //   productResetPrice({productId:id}).then((res)=>{
    //     that.$util.Tips({title:'操作成功'},{tab:4,url:'/pages/goods_management/index'})
    //   })
    // }
  },
};
</script>
<style lang="scss" scoped>
.goods-detail {
  background: #ffffff;
  padding: 10rpx 18rpx;
  .uni-form-item {
    padding: 20rpx 30rpx;
    .title {
      padding: 10rpx 0rpx;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .uni-input {
      padding: 15rpx 25rpx;
      background: #f2f2f2;
    }
    .imageBox {
      margin: 0 20rpx;
      .image {
        width: 80rpx;
        height: 80rpx;
        margin: 0rpx 5rpx;
      }
    }
    .text {
      border: 1rpx solid #e8e9ed;
      width: 100%;
    }
    .goodsInfo {
      border-top: 1rpx solid #e8e9ed;
      margin: 20rpx 0rpx;
      .item-list {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #e8e9ed;
        .item {
          display: flex;
          align-items: center;
          padding: 20rpx 10rpx;
          .title1 {
            width: 263rpx;
            padding: 0rpx 7rpx;
            font-weight: bold;
          }
          .skuImage {
            width: 100%;
            .image {
              width: 35rpx;
              height: 35rpx;
            }
          }
        }
      }
    }
    .time {
      background: #f2f2f2;
      display: flex;
      align-items: center;
      padding: 10rpx 5rpx;
      input {
        padding: 5rpx 15rpx;
      }
    }
    .clearPrice {
      display: flex;
      align-items: center;
      .btn {
        padding: 20rpx 35rpx;
        border-radius: 0;
        background: black;
        color: white;
        font-size: 24rpx;
        margin-left: 30rpx;
      }
    }
    .alt {
      padding: 10rpx 0rpx;
      span {
        display: block;
        color: #bbbbbb;
        font-size: 22rpx;
      }
    }
  }
  .back_mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  // 新增样式start===============
  input {
    color: rgba(34, 34, 34, 1) !important;
  }
  .picker_address_box {
    left: 0;
    right: 0;
    height: 500rpx;
    background-color: #ffffff;
    position: absolute;
    bottom: 0;
    padding: 0 20rpx;
    .picker_btn {
      padding: 20rpx 0;
      font-size: 24rpx;
      color: #222222;
      display: flex;
      justify-content: space-between;
      .btn_confirm {
        background-color: rgba(34, 34, 34, 1);
        border-radius: 4rpx;
        color: #ffffff;
        padding: 10rpx 20rpx;
      }
    }
    .picker_box {
      height: 200rpx;
      position: absolute;
      width: 100%;
      bottom: 200rpx;
      .picker_view {
        height: 200rpx;
        font-size: 32rpx;
        text-align: center;
      }
      .area_type {
        width: 230rpx;
        text-align: center;
        flex: none;
      }
      .area_city {
        width: 230rpx;
        text-align: center;
        flex: none;
      }
    }
  }
}
</style>